<template>
	<!-- 加载中组件 -->
	<uni-load-more :status="isLoadingStatus" v-if="isLoading" />
	<!-- 滚动列表容器 -->
	<scroll-view v-else scroll-y @scrolltolower="onScrollToLower">
		<!-- 1. 榜单模块 -->
		<view class="rank-container">
			<!-- 1.1 榜单标题区域 -->
			<view class="rank-header">
				<!-- 可横向滚动的榜单标题 -->
				<scroll-view scroll-x enable-flex class="rank-title-scroll">
					<!-- 榜单标题项，点击切换榜单 -->
					<view :class="{ active: activeRankIndex === index }" class="rank-title-item"
						v-for="(rankTitle, index) in rankTitleData" :key="index" @click="handleRankSwitch(index)">
						{{ rankTitle.name }}
					</view>
				</scroll-view>
				<!-- 完整榜单链接 -->
				<navigator class="more-link" url="/pages/rank/index">
					完整榜单
				</navigator>
			</view>

			<!-- 1.2 当前榜单内容区域 -->
			<scroll-view scroll-x class="content-scroll">
				<!-- 内容行容器 -->
				<view class="content-row">
					<!-- 每页内容容器 -->
					<view v-for="(page, pIndex) in currentPagedBooks" :key="pIndex" class="content-page">
						<!-- 书籍项导航链接 -->
						<navigator :url="`/pages/book/index?bookId=${book.id}`" v-for="(book, bIndex) in page"
							:key="bIndex" class="book-item">
							<!-- 书籍封面 -->
							<image class="book-cover" :src="`${baseURL}${book.image}`" mode="aspectFill" />

							<!-- 书籍排名 -->
							<view class="book-rank"
								:class="{ 'rank-top': book.rank !== undefined && [1, 2, 3].includes(book.rank) }">
								<text>{{ book.rank }}</text>
							</view>

							<!-- 书籍信息区域 -->
							<view class="book-info">
								<view class="book-name">{{ book.name }}</view>
								<view class="book-meta"><text>{{ book.hot }}人气</text></view>
								<view class="book-meta"><text>{{ book.wordCount }}字数</text></view>
							</view>
						</navigator>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 2. 推荐书籍模块 -->
		<ZfCommonBookRecommend ref="bookRecommendRef" sourceType="推荐" />
	</scroll-view>
</template>

<script setup lang="ts">
	import { bookRecommendList } from '@/composables';
	import { listRecommendBooksByRankIdAPI, queryAllRankListAPI } from '@/services/rank';
	import { BookItem } from '../../../types/book';
	import { RankItem } from '../../../types/rank';
	import { baseURL } from '@/utils/config';
	import { computed, onMounted, ref } from 'vue';

	/** 推荐书籍组件引用 */
	const { bookRecommendRef, onScrollToLower } = bookRecommendList();
	/** 当前选中的榜单索引 */
	const activeRankIndex = ref(0);
	/** 榜单书籍数据 */
	const rankBooksData = ref<BookItem[]>([]);
	/** 页面加载状态 */
	const isLoading = ref(false);
	/** 榜单标题数据 */
	const rankTitleData = ref<RankItem[]>([]);
	/** 加载状态文本 */
	const isLoadingStatus = ref('more');

	/**
	 * 页面挂载时加载数据
	 * 使用 onMounted 而非 onShow 是因为该组件只需要在首次挂载时加载一次数据
	 */
	onMounted(async () => {
		// 开启加载状态
		isLoading.value = true;
		isLoadingStatus.value = 'loading';

		try {
			// 查询榜单标题数据
			const rankRes = await queryAllRankListAPI();
			rankTitleData.value = rankRes.data;

			// 查询当前榜单下的书籍信息
			if (rankTitleData.value.length > 0) {
				const booksRes = await listRecommendBooksByRankIdAPI(rankTitleData.value[0].id);
				rankBooksData.value = booksRes.data;
			}
		} catch (error) {
			console.error('加载数据失败:', error);
		} finally {
			// 延迟关闭加载状态，提升用户体验
			setTimeout(() => {
				isLoading.value = false;
				isLoadingStatus.value = 'more';
			}, 100);
		}
	});

	/**
	 * 处理榜单切换
	 * @param index 要切换的榜单索引
	 */
	const handleRankSwitch = (index : number) => {
		// 更新选中的榜单索引
		activeRankIndex.value = index;
		// 根据新索引获取对应的榜单数据
		listRecommendBooksByRankIdAPI(rankTitleData.value[index].id)
			.then(res => {
				rankBooksData.value = res.data;
			})
			.catch(error => {
				console.error('切换榜单失败:', error);
			});
	};

	/**
	 * 计算分页后的书籍列表
	 * 使用 computed 可以确保数据变化时自动重新计算
	 * @returns 分页后的书籍二维数组
	 */
	const currentPagedBooks = computed<BookItem[][]>(() => {
		// 每页显示4本书
		const pageSize = 4;
		const currentItems = rankBooksData.value;
		const resultArray : BookItem[][] = [];

		// 遍历书籍列表进行分页
		for (let i = 0; i < currentItems.length; i++) {
			const chunkIndex = Math.floor(i / pageSize);

			if (!resultArray[chunkIndex]) {
				resultArray[chunkIndex] = [];
			}

			resultArray[chunkIndex].push(currentItems[i]);
		}

		return resultArray;
	});
</script>

<style lang="scss" scoped>
	/* 榜单容器 */
	.rank-container {
		margin: 0 0.75rem;
		background-color: #fff;
		border-radius: 0.5rem;
		white-space: nowrap;

		/* 榜单标题区域 */
		.rank-header {
			display: flex;
			justify-content: space-between;
			align-items: center;

			/* 标题滚动容器 */
			.rank-title-scroll {
				width: 80%;
				white-space: nowrap;

				/* 标题项基础样式 */
				.rank-title-item {
					display: inline-block;
					padding: 0.5rem 0;
					margin: 0 0.5rem;
					color: #4b5563;
					font-size: 0.875rem;

					/* 激活状态样式 */
					&.active {
						color: #000;
						font-size: 1.125rem;
					}
				}
			}

			/* 完整榜单链接 */
			.more-link {
				padding: 0.5rem 0;
				margin: 0 0.25rem;
				font-size: 0.875rem;
				color: #4b5563;
				width: 20%;
				box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
				border-radius: 0.5rem;
			}
		}

		/* 内容滚动容器 */
		.content-scroll {
			width: 100%;
			white-space: nowrap;

			/* 内容行容器 */
			.content-row {
				display: inline-flex;

				/* 每页内容容器 */
				.content-page {
					width: 500rpx;

					/* 书籍项容器 */
					.book-item {
						display: flex;
						align-items: center;
						padding: 0.5rem;
						height: 6rem;

						/* 书籍封面 */
						.book-cover {
							width: 100rpx;
							height: 150rpx;
							border-radius: 0.5rem;
						}

						/* 书籍排名 */
						.book-rank {
							padding: 0 0.25rem;
							height: 5rem;
							font-size: 1.125rem;
							width: 50rpx;

							/* 前三名特殊样式 */
							&.rank-top {
								color: #d97706;
							}
						}

						/* 书籍信息区域 */
						.book-info {
							flex: 1;
							height: 100%;
							width: 200rpx;
							display: flex;
							flex-direction: column;

							/* 书籍名称 */
							.book-name {
								font-size: 30rpx;
								width: 100%;
								margin-top: 0.75rem;
								font-weight: 500;
								margin-bottom: 10rpx;
								white-space: pre-line;
								word-wrap: break-word;
							}

							/* 书籍元数据 */
							.book-meta {
								margin-top: 0.25rem;
								font-size: 0.875rem;
								color: #9ca3af;
							}
						}
					}
				}
			}
		}
	}
</style>